<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-03-29 17:27:17
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-30 11:24:43
 * @FilePath: /tea-garden-web/src/pages/overview/portal.vue
 * @Description: 组件-基地概览
-->
<template>
  <div class="component-base-overview">
    <div class="content">
      <div class="date-weather-area">
        <i class="icon-button-back" @click="handleEnterRoute('baseList')" />
        <span class="base-name">{{ baseInfo.base_name }}</span>
        <!-- <span class="solar">{{ solar }}</span>
        <span class="lunar" v-html="lunar"></span>
        <span class="TemBox"  @mouseover="showPopup" @mouseleave="startFadeOut">
          <i
          class="weather-b icon-weather "
          :class="[
            dateTime.hour <= 18
              ? formatValue('day_code')
              : formatValue('night_code'),
          ]"
        />
          <span class="temperature-range">
            {{ formatValue("temperature") }}
          </span>
        </span> -->
 <!-- 气象弹窗 -->

        <!-- <section class="info-box-2"  v-if="popupVisible"  @mouseover="clearHideTimer"
         @mouseleave="startHideTimer"
         :style="{opacity: popupOpacity}">
          <section class="single-weather" v-for="(item, index) in this.todayWeather" :key="index">
            <section class="date">{{item.date.slice(-5)}}</section>
            <section class="weather-icon">
              <span class="weather-b" :class="[`${item.wea_img}`]"></span>
            </section>
            <section class="max-temperature">{{ item.tem_day }}</section>
            <section class="min-temperature">{{ item.tem_night }}</section>
          </section>
        </section> -->
        <!-- 气象弹窗 -->
      </div>
      <div class="preview-area">
        <!-- <div class="search-input">
          <input
            type="text"
            class="input"
            placeholder="地块搜索"
            @click="handleEnterRoute('farmlandSearch')"
          />
        </div> -->
        <!-- <span class="title">今日农事</span> -->
        <component-farming-tasks
          class="today-arrange"
          :height="173"
        />
        <span class="title">专题应用</span>
        <div class="modules">
          <div
            class="module-01"
            @click="handleEnterRoute('subjectGrowth')"
          ></div>
          <div
            class="module-02"
            @click="handleEnterRoute('subjectPick')"
          ></div>
          <div
            class="module-03"
            @click="handleEnterRoute('subjectDisease')"
          ></div>
          <div
            class="module-04"
            @click="handleEnterRoute('subjectWeather')"
          ></div>
        </div>
        <span class="title">农事管理</span>
        <div class="modules">
          <div
            class="module-05"
            @click="handleEnterRoute('farmingCalendar')"
          ></div>
          <div class="module-06"
          @click="handleEnterRoute('farmingRecords')"
          ></div>
          <div class="module-10"
          @click="handleEnterRoute('smartSuggestion')"
          ></div>
        </div>
        <span class="title">茶园管理</span>
        <div class="modules">
          <div
            class="module-07"
            @click="handleEnterRoute('managerPerson')"
          ></div>
          <div
            class="module-08"
            @click="handleEnterRoute('managerEquipment')"
          ></div>
          <div
            class="module-09"
            @click="handleEnterRoute('farmlandSearch')"
          ></div>
           <div
            class="module-11"
            @click="godashboard()"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { DateTime } from 'luxon'
import { mapActions, mapMutations, mapState } from 'vuex'
const { Lunar } = require('lunar-javascript')
export default {
  name: 'component-base-overview',
  data () {
    return {
      popupVisible: false,
      hideTimer: null,
      popupOpacity: 1
    }
  },
  computed: {
    ...mapState('base-overview', ['baseInfo', 'todayWeather', 'todayFarming', 'loading']),
    dateTime () {
      return DateTime.now()
    },
    solar () {
      return this.dateTime.toLocaleString(DateTime.DATE_FULL)
    },
    lunar () {
      const lunar = Lunar.fromDate(new Date())
      let result = lunar.getYearInGanZhi() + '年' + lunar.getMonthInChinese() + '月' + lunar.getDayInChinese()
      if (lunar.getJieQi()) {
        result += '&nbsp;&nbsp;' + lunar.getJieQi()
      } else {
        result += '&nbsp;&nbsp;即将' + lunar.getNextJieQi()
      }
      return result
    }
  },
  methods: {
    ...mapActions('base-overview', ['getTodayWeather', 'getTodayFarming']),
    ...mapMutations('base-overview', ['setQuery']),
    // 驾驶舱跳转
    godashboard () {
      // window.open('http://39.105.35.32:8083/#/', '_self')
      window.open('http://115.29.207.19:8081/songyangTea/', '_blank')
    },
    // 气象弹窗
    showPopup () {
      this.popupVisible = true
      this.popupOpacity = 1 // 显示弹窗时恢复完全不透明
    },
    startFadeOut () {
      this.hideTimer = setTimeout(() => {
        this.popupOpacity = 0 // 开始逐渐将弹窗设为透明
      }, 500) // 500毫秒后开始逐渐隐藏
    },
    clearHideTimer () {
      clearTimeout(this.hideTimer)
      this.popupOpacity = 1 // 当鼠标再次悬停时恢复完全不透明
    },
    startHideTimer () {
      this.hideTimer = setTimeout(() => {
        this.popupVisible = false
        this.popupOpacity = 1 // 鼠标离开后再次恢复完全不透明
      }, 1000) // 鼠标离开后延迟1秒隐藏弹窗
    },
    // 数据格式化
    // formatValue (key) {
    //   let value = ''
    //   if (this.todayWeather && this.todayWeather[key]) {
    //     value = this.todayWeather
    //     switch (key) {
    //       case 'temperature':
    //         value += '℃'
    //         break
    //     }
    //   } else {
    //     switch (key) {
    //       case 'day_code':
    //         value = 'd99'
    //         break
    //       case value:
    //         value = 'n99'
    //         break
    //       case 'temperature':
    //         value = '----'
    //         break
    //     }
    //   }
    //   console.log(value)
    //   return value
    // },
    // 根据传参匹配温度或者温度logo
    formatValue (key) {
      if (key === 'temperature') {
        if (this.todayWeather !== null && this.todayWeather !== undefined) {
          return this.todayWeather[0].tem_night + '°C' + '~' + this.todayWeather[0].tem_day + '°C'
        } else {
          return '---'
        }
      } else {
        if (this.todayWeather !== null && this.todayWeather !== undefined) {
          return this.todayWeather[0].wea_img
        } else {
          return '---'
        }
      }
    },
    // 进入指定路由
    handleEnterRoute (name) {
      this.$router.push({ name })
    }
  },
  created () {
    this.getTodayWeather()
    this.getTodayFarming()
    this.setQuery({ target: { value: '' } })
  }
}
</script>

<style lang="scss">

.component-base-overview {
  width: 308px;
  height: 780px;
  margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    .date-weather-area {
      position: relative;
      .icon-button-back {
        position: absolute;
        left: 17px;
        top: 21.5px;
        width: 20px;
        height: 18px;
        background-image: url("/public/image/common/icon-button-back-01.png");
        background-size: cover;
        cursor: pointer;
      }
      .base-name {
        position: absolute;
        left: 45px;
        top: 17px;
        font-size: 18px;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
        color: #ffffff;
      }
      .solar {
        position: absolute;
        left: 21px;
        top: 57.5px;
        font-size: 14px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #ffffff;
      }
      .lunar {
        position: absolute;
        left: 21px;
        top: 83px;
        font-size: 12px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #ceebee;
      }
        .TemBox {
          width: 100px;
          height: 110px;
          // background-color: #fff;
          display: inline-block;
          position: absolute;
          right: 20.5px;
          top: 0px;
          .icon-weather {
        position: absolute;
        right: 20.5px;
        top: 15px;
      }
      .temperature-range {
        position: absolute;
        right: 10.5px;
        width: 82px;
        top: 79.5px;
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #fead54;
        text-align: center;
      }

        }
       .info-box-2 {
      background-color: #fff;
      height: 170px;
      width: 100%;
       transition: opacity 0.5s; /* 添加透明度过渡效果 */
      white-space: nowrap;
      z-index: 100;
      position: relative;
      right: -100%;
      border-radius: 15px;
      padding: 2px 10px;
      .single-weather {
        width: 30px;
        height: 165px;
        margin-right: 12.5px;
        padding: 10px 0;
        background: rgba(230,245,246,0.8);
        border-radius: 5px 5px 5px 5px;
        display: inline-block;
        vertical-align: top;
        &:last-of-type {
          margin-right: 0;
        }
        .week-day {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #089BAB;
          text-align: center;
        }
        .date {

          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #9CD7DD;
          text-align: center;
        }
        .weather-icon {
          height: 40px;
          span {
            transform: scale(0.43);
            transform-origin: left top;
          }
        }
        .max-temperature {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #089BAB;
          text-align: center;
          &::after {
              content: '°C';
          }
        }
        .min-temperature {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #089BAB;
          text-align: center;
          &::after {
              content: '°C';
          }
        }
      }
    }

    }
    .preview-area {
      width: 308px;
      height: 725px;
      // transform: scale(0.9);
      background: #ffffff;
      box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
      border-radius: 15px 15px 15px 15px;
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 12px 20px 25px 20px;
      .search-input {
        margin-bottom: 21px;
        &::before {
          display: inline-block;
          vertical-align: top;
          content: "";
          width: 27.5px;
          height: 27.5px;
          background-image: url("/public/image/common/icon-button-search.png");
          background-size: cover;
          margin-right: 8.5px;
        }
        .input {
          border-top: 0;
          border-right: 0;
          border-bottom: 1px solid #9cd7dd;
          border-left: 0;
          width: 219px;
          height: 27.5px;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #9cd7dd;
          line-height: 27.5px;
        }
        ::-webkit-input-placeholder {
          color: #9cd7dd;
          font-size: 14px;
        }
      }
      .title {
        margin-top: 10px;
        height: 23px;
        font-size: 14px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
        display: block;
      }
      .today-arrange {
        // width: 273px;
        min-height: 400px;
        max-height: 400px;
        overflow-y: auto;
        // border-radius: 5px;
        // margin-top: 10px;
        // margin-bottom: 25px;
      }
      .modules {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
        &:last-of-type {
          margin-bottom: 0;
        }
        @mixin module($num: "01", $name: "长势与水肥") {
          position: relative;
          width: 25%;
          text-align: center;
          cursor: pointer;
          &::before {
            content: "";
            display: block;
            width: 40px;
            height: 40px;
            margin: 0 auto;
            background: url("/public/image/base-overview/icon-#{$num}.png");
            background-size: cover;
          }
          &::after {
            content: "#{$name}";
            display: block;
            font-size: 12px;
            line-height: 20px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            text-align: center;
          }
        }
        .module-01 {
          @include module("01", "长势与水肥");
        }
        .module-02 {
          @include module("02", "采摘预测");
        }
        .module-03 {
          @include module("03", "病虫害管理");
        }
        .module-04 {
          @include module("04", "气象灾害");
          margin-right: 0;
        }
        .module-05 {
          @include module("05", "农事日历");
        }
        .module-06 {
          @include module("06", "农事记录");
          // margin-right: 0;
        }
        .module-10 {
          @include module("10", "农事建议");
          margin-right: 0;
        }
        .module-07 {
          @include module("07", "人员管理");
        }
        .module-08 {
          @include module("08", "设备管理");
        }
        .module-09 {
          @include module("09", "地块管理");
          // margin-right: 0;
        }
                .module-11 {
          @include module("11", "驾驶舱");
          margin-right: 0;
        }
      }
    }
  }
}
</style>
